import React, { useEffect, useRef, useState } from 'react';
import * as echarts from 'echarts';
import './Tongji.less';

const Tongji: React.FC = () => {
  const chartRef = useRef<HTMLDivElement>(null);
  const [filters, setFilters] = useState({
    region: '',
    deviceType: '',
    manufacturer: '',
    startTime: '',
    endTime: ''
  });

  useEffect(() => {
    // 确保容器存在
    if (!chartRef.current) return;

    // 初始化图表
    const chart = echarts.init(chartRef.current);
    
    // 设置图表配置
    const option = {
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['数据完整率', '数据有效率']
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: ['厂家1', '厂家2', '厂家3', '厂家4', '厂家5', '厂家6', '厂家7', '厂家8']
      },
      yAxis: [
        {
          type: 'value',
          name: '数据完整率(%)',
          min: 0,
          max: 150,
          axisLabel: {
            formatter: '{value}'
          }
        },
        {
          type: 'value',
          name: '数据有效率(%)',
          min: 0,
          max: 150,
          axisLabel: {
            formatter: '{value}'
          }
        }
      ],
      series: [
        {
          name: '数据完整率',
          type: 'line',
          data: [112, 95, 120, 140, 125, 105, 105, 75],
          smooth: true,
          yAxisIndex: 0,
          itemStyle: {
            color: '#fca311'
          },
          lineStyle: {
            color: '#fca311'
          }
        },
        {
          name: '数据有效率',
          type: 'line',
          data: [90, 120, 130, 120, 105, 140, 150, 105],
          smooth: true,
          yAxisIndex: 1,
          itemStyle: {
            color: '#007bff'
          },
          lineStyle: {
            color: '#007bff'
          }
        }
      ]
    };

    chart.setOption(option);

    // 响应式调整
    const resizeHandler = () => chart.resize();
    window.addEventListener('resize', resizeHandler);

    // 清理函数
    return () => {
      window.removeEventListener('resize', resizeHandler);
      chart.dispose();
    };
  }, []);

  const handleFilterChange = (e: React.ChangeEvent<HTMLSelectElement | HTMLInputElement>) => {
    const { name, value } = e.target;
    setFilters(prev => ({ ...prev, [name]: value }));
  };

  const handleQuery = () => {
    console.log('查询条件:', filters);
    // 这里可以添加根据条件更新图表的逻辑
  };

  const handleReset = () => {
    setFilters({
      region: '',
      deviceType: '',
      manufacturer: '',
      startTime: '',
      endTime: ''
    });
  };

  return (
    <div className="tongji-container">
      {/* 顶部筛选区域 */}
      <div className="top-filter">
        <select 
          name="region"
          value={filters.region} 
          onChange={handleFilterChange}
        >
          <option value="">请选择区域</option>
          <option value="区域1">区域1</option>
          <option value="区域2">区域2</option>
        </select>
        
        <button className="query-button" onClick={handleQuery}>查询</button>
        <button className="reset-button" onClick={handleReset}>重置</button>
      </div>
      
      {/* 数据统计半圆区域 */}
      <div className="statistic半圆">
        <div className="statistic-item">
          <span>监控点总数</span>
          <span>100</span>
        </div>
        <div className="statistic-item">
          <span>监控点在线率</span>
          <span>100%</span>
        </div>
        <div className="statistic-item">
          <span>数据完整率</span>
          <span>100%</span>
        </div>
        <div className="statistic-item">
          <span>数据有效率</span>
          <span>98.89%</span>
        </div>
      </div>
      
      {/* 底部筛选区域 */}
      <div className="bottom-filter">
        <input
          type="text"
          name="startTime"
          placeholder="开始时间"
          value={filters.startTime}
          onChange={handleFilterChange}
        />
        <span>—</span>
        <input
          type="text"
          name="endTime"
          placeholder="结束时间"
          value={filters.endTime}
          onChange={handleFilterChange}
        />
        <select 
          name="deviceType"
          value={filters.deviceType} 
          onChange={handleFilterChange}
        >
          <option value="">请选择设备类型</option>
          <option value="设备类型1">设备类型1</option>
          <option value="设备类型2">设备类型2</option>
        </select>
        <select 
          name="manufacturer"
          value={filters.manufacturer} 
          onChange={handleFilterChange}
        >
          <option value="">请选择厂家</option>
          <option value="厂家1">厂家1</option>
          <option value="厂家2">厂家2</option>
        </select>
        
        <button className="query-button" onClick={handleQuery}>查询</button>
        <button className="reset-button" onClick={handleReset}>重置</button>
      </div>
      
      {/* 图表容器 - 确保这个div有正确的ref和className */}
      <div ref={chartRef} className="echarts-chart"></div>
    </div>
  );
};

export default Tongji;